<template>
  <div class="publish">
    <m-header modile-title="练习2" go-back="true"></m-header>
    <yd-accordion>
      <yd-accordion-item v-for="(list,index) in lists" :key="index" :title="list.title" @click="ydClike(list.id)">
        <div v-for="(lis,index2) in list.childs" :key="index2" style="padding: .24rem;">
          <p>{{lis.content}}</p>
        </div>
      </yd-accordion-item>
    </yd-accordion>
    <div class="select">
      <select name="" id="" @change="selectBtn" v-model="textshow">
        <option :value="o.value" v-for="(o,index) in options">{{o.text}}</option>
      </select>
    </div>
    <div class="number-box">
      <span>{{age}}</span>
      <button @click="add">双击加一岁</button>
      <button @click="reduce">双击减一岁</button>
    </div>

    <!--验证码刷新页面不受影响-->
    <div class="yzm">
      <div class="yzm_box">
        <input type="text" placeholder="请输入验证码">
        <button @click="getCode()" :disabled="btnFlag" :class="[btnFlag===true?'gray':'']">{{result>0 && result?result:'获取验证码'}}</button>
      </div>
    </div>

  </div>

</template>
<style lang="scss">
  .publish {
    width: 100%;
    padding-top: 60px;
    background: #fff;
    .yd-accordion {
      width: 100%;
    }
    .select {
      width: 100%;
      padding-top: 50px;
      select {
        width: 200px;
        height: 50px;
        option {
          text-align: center;
        }
      }
    }
    .container {
      width: 100%;
      select {
        width: 200px;
        height: 40px;
      }
    }
    .number-box {
      width: 100%;
      padding: 50px 0;
    }
    .yzm{
      padding: 50px 0;
      .yzm_box{
        input{
          padding: 20px;
          border-radius: 5px;
          color: #333333;
          font-size: 23px;
        }
        button{
          width: 200px;
          padding: 20px 0;
          background: #42bd56;
          color: white;
          font-size: 26px;
          border: none;
          border-radius: 5px;
          &.gray{
            background: gray;
          }
        }
      }
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import {Toast} from 'mint-ui'

  export default {
    data() {
      return {
        lists: [],
        options: [
          {value: '1', text: 'ONE'},
          {value: '2', text: 'TWO'},
          {value: '3', text: 'THREE'},
          {value: '4', text: 'FOUR'}
        ],
        textshow: '请选择',
        changeValue: '',
        number: 377362,
        newNum: '',
        age: '18',
        storeDate: '',
        btnFlag: false, // 验证码按钮是否禁止
        timer:null,
        result: null, // 此变量为截止时间戳和当前时间戳相减的差
        timeStamp: null // 此变量为倒计时截止时间戳
      }
    },
    filters: {},
    created() {
      this.getlistDate()
      this.textshow = this.options[0].value; // 如果没有这句select初始化为空白
      if (this.number >= 100000) {
        this.newNum = parseInt(this.number / 100)
        console.log(this.newNum)
      }
      if (this.number >= 10000) {
        this.newNum = parseInt(this.number / 100)
        console.log(this.newNum)
      }

    //  进入该页面先判断本地存储里存储的时间戳与当前时间戳相减的差是否<=0
      window.addEventListener('beforeunload',()=>{
        if (this.timeStamp) {
          localStorage.setItem("reduceTimeStamp", JSON.stringify(this.timeStamp));
          clearInterval(this.timer);
        }
      })
      let temp = JSON.parse(localStorage.getItem('reduceTimeStamp'))
      let NowStamp = new Date().getTime()
    //  如果<=0说明倒计时已经结束，将恢复文字提示状态
      if (temp-NowStamp<=0) {
        this.result = null
        this.btnFlag = false
      } else {
        this.result = parseInt((temp-NowStamp)/1000)
        console.log(this.result)
      }

    },
    mounted(){
      if (this.result) {
        this.getCode()
      }
    },
    methods: {
      getlistDate() {
        this.$http.get('../static/fold.json').then(res => {
          if (res.status === 200) {
            this.lists = res.data
            // console.log(this.lists)
          }
        })
      },
      ydClike(id) {
        console.log(id)
      },
      selectBtn(e) {
        // console.log(this.textshow)
        this.changeValue = e.target.value
      },
      add() {
        this.age++;
      },
      reduce() {
        this.age--;
      },

    //  获取验证码
      getCode () {
        console.log('点击获取验证码')
        this.btnFlag = !this.btnFlag
      //  如果result<=0，说明上一次读秒已经结束，需要重新设置新的时间戳
        if(!this.result){
          let currentStamp = new Date().getTime()
          //设置倒计时60s
          this.timeStamp = new Date().getTime()+60*1000
          this.result = (this.timeStamp - currentStamp) / 1000;
        }
        this.timer = setInterval(()=>{
          this.result--
          if (this.result === 0) {
            clearInterval(this.timer);
            this.timer = null;
            this.btnFlag = false;
          }
        },1000)
      }

    },
    components: {
      mHeader
    }
  }
</script>
